<template>
  <div>
    {{ orderList.proList }}
    <div v-if="orderList.length > 0">
      <div class="OrderItem" v-for="(item, index) in orderList" :key="index">
        <p class="OrderItem_num">
          订单编号：{{ item.orderNumber }}
          <span>{{ orderType[item.status] }}</span>
        </p>
        <van-row
          class="Order_item"
          v-for="(item1, index1) in item.proList"
          :key="index1"
        >
          <van-col span="7">
            <img v-if="item1.img != null" :src="$base.baseImg + item1.img[0]" />
          </van-col>
          <van-col span="17">
            <div class="Order_right">
              <h3>{{ item1.proName }}</h3>
              <p>￥ {{ (item1.price / 100).toFixed(2) }}X {{ item1.num }}</p>
              <p>{{ item1.content }}</p>
            </div>
          </van-col>
        </van-row>
        <div class="Order_bottom">
          <van-button
            v-if="item.typ == 3 && item.status == 1"
            type="primary"
            color="#D4B066"
            round
            size="mini"
            @click="showDeliver(item.orderNumber)"
            >立即发货</van-button
          >
          <van-button
            v-if="item.status == 0"
            type="primary"
            color="#D4B066"
            round
            size="mini"
            @click="
              showPrice(item.orderNumber, (item.payAmount / 100).toFixed(2))
            "
            >修改价格</van-button
          >
        </div>
      </div>
    </div>
    <van-empty v-else />
    <!-- 修改价格 -->
    <van-dialog
      v-model="show"
      @confirm="editOrderPrice"
      title="修改价格"
      show-cancel-button
    >
      <van-field
        v-model="form.payAmount"
        type="number"
        label="价格"
        placeholder="请输入修改的价格"
      />
    </van-dialog>
    <!-- 发货确认框 -->
    <van-dialog
      v-model="show1"
      @confirm="confirmReceipt"
      title="确认发货"
      show-cancel-button
    >
      <van-field
        v-model="form1.expressCompany"
        type="text"
        label="物流公司"
        placeholder="请输入物流公司"
      />
      <van-field
        v-model="form1.waybillNumber"
        type="number"
        label="物流单号"
        placeholder="请输入物流单号"
      />
    </van-dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";
import { Col, Row, Button, Empty, Dialog, Toast, Field } from "vant";

Vue.use(Field);
Vue.use(Empty);
Vue.use(Button);
Vue.use(Col);
Vue.use(Row);
Vue.use(Dialog);
@Component({})
export default class OrderItem extends Vue {
  @Prop() orderList?: [];
  private form = {
    orderNumber: "",
    payAmount: 0,
  };
  private form1 = {
    expressCompany: "",
    orderNumber: "",
    waybillNumber: "",
  };
  private show: boolean = false;
  private show1: boolean = false;
  private orderType = {
    0: "待支付",
    1: "待发货",
    2: "待收货",
    3: "已完成",
  };
  // 发货
  private confirmReceipt(e: string) {
    if (this.form1.expressCompany == "") {
      Toast.fail("物流公司必填");
      return;
    }
    if (this.form1.waybillNumber == "") {
      Toast.fail("物流单号必填");
      return;
    }
    this.$post(`deliverOrder`, this.form1).then((res: any) => {
      if (res.code == 0) {
        Toast.success(`发货成功！`);
        this.onSearch();
      }
    });
  }
  // 发货弹窗
  showDeliver(e: string) {
    this.form1.orderNumber = e;
    this.show1 = true;
  }
  // 改价弹窗
  showPrice(e: string, a: number) {
    this.form.orderNumber = e;
    this.form.payAmount = a;
    this.show = true;
  }
  @Emit()
  onSearch() {}
  // 改价
  editOrderPrice(e: string) {
    this.$post(`editOrderPrice`, {
      ...this.form,
      payAmount: this.form.payAmount * 100,
    }).then((res: any) => {
      if (res.code == 0) {
        Toast.success(`改价成功！`);
        this.onSearch();
        this.show = false;
      }
    });
  }
}
</script>

<style lang="scss" scope>
.OrderItem {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 20px;
  .OrderItem_num {
    font-size: 24px;
    font-weight: 300;
    color: #000000;
    line-height: 2;
    text-align: left;
    display: block;
    overflow: hidden;
    span {
      float: right;
      color: rgb(210, 161, 102);
    }
  }
  .Order_item {
    // border-bottom: 1px solid #dbdbdb;
    padding: 10px 0;
    box-sizing: border-box;
    img {
      width: 100%;
      display: block;
      height: 150px;
      border-radius: 10px;
    }
    .Order_right {
      padding-left: 10px;
      box-sizing: border-box;
      h3 {
        font-size: 30px;
        font-weight: 400;
        color: #000000;
        line-height: 1.5;
      }
      p {
        font-size: 24px;
        font-weight: 300;
        color: #333333;
        line-height: 1.5;
      }
    }
  }
  .Order_bottom {
    padding: 10px;
    box-sizing: border-box;
    text-align: right;
  }
}
</style>